<template>
  <div class="article-sidebar" v-show="!isLoadingSkeleton">
    <!-- 用户信息 -->
    <div ref="headbox">
      <div class="article-sidebar-box userinfo-container">
        <div class="userinfo-head">
          <!-- 头像 -->
          <img :src="authorInfo.avatar_large" />
          <!-- 名字与工作 -->
          <div class="info-box">
            <div class="info-name">{{ authorInfo.user_name }}</div>
            <div>{{ authorInfo.job_title }}</div>
          </div>
        </div>
        <div class="userinfo-body">
          <div class="body-box">
            <div><i class="el-icon-thumb"></i></div>
            获得点赞&nbsp;
            {{ toThousands(authorInfo.got_digg_count) }}
          </div>
          <div class="body-box">
            <div><i class="el-icon-view"></i></div>
            文章被阅读&nbsp;
            {{ toThousands(authorInfo.got_view_count) }}
          </div>
        </div>
      </div>
      <div class="article-sidebar-box">
        <!-- 相关文章  -->
        <div class="box-title">相关文章</div>
        <div
          v-for="item in similarList"
          :key="item.article_id"
          class="similar-item"
          @click="goNewArticle(item.article_id)"
        >
          <div class="item-title">{{ item.article_info.title }}</div>
          <div>
            <span class="item-meta digg_count">
              {{ item.article_info.digg_count }}点赞</span
            >
            <span class="item-meta"
              >{{ item.article_info.comment_count }}收藏</span
            >
          </div>
        </div>
      </div>
    </div>
    <!-- 文章目录 -->
    <div
      class="article-sidebar-box directory"
      :class="{ fixed: shouldFixed, down: shouldFixed && !isHideHead }"
    >
      <div class="box-title">目录</div>
      <div class="box-body" ref="directoryScroll">
        <div
          :class="[item.level, 'directory-item', { actived: actived === i }]"
          v-for="(item, i) in navList"
          :key="i + 'nav'"
          @click="handleClick(i)"
        >
          <span>{{ replace(item.innerHTML) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {
      actived: 0
    }
  },
  mounted() {
    this.$bus.$on('actived', (index) => {
      this.actived = index
    })
  },
  props: {
    authorInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    similarList: {
      type: Array,
      default: () => {
        return []
      }
    },
    navList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isLoadingSkeleton: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  computed: {
    ...mapState(['shouldFixed', 'isHideHead'])
  },
  methods: {
    ...mapMutations(['updateActived']),
    // 跳转到本页面的新文章
    goNewArticle(id) {
      console.log(id)
      this.$router.push(`/article/?id=${id}`)
      window.location.reload()
    },
    // 监听导航栏的点击
    handleClick(index) {
      // 获取对应标题的 offsetTop,
      const markdown = document.querySelector('#markdown')
      const title = markdown.querySelectorAll('h1 ,h2,h3,h4')
      const scrollTop = title[index].offsetTop
      document.documentElement.scrollTop = scrollTop
      this.isActived = index
    },

    // 每三位数加逗号
    toThousands(num) {
      return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
    },
    // 过滤 html 标签
    replace(html) {
      return html.replace(/<.*?>/g, '')
    }
  },
  beforeDestroy() {
    this.$bus.$off('actived')
  }
}
</script>

<style lang="less" scoped>
.article-sidebar {
  width: 25rem;
  position: absolute;
  top: 0;
  right: 0;

  .userinfo-container {
    padding: 1.667rem;

    .userinfo-head {
      display: flex;
      border-bottom: 1px solid #e4e6eb;
      margin-bottom: 1rem;
      padding-bottom: 1rem;

      img {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
      }

      .info-box {
        display: flex;
        margin-left: 1rem;
        flex-direction: column;
        justify-content: space-around;
        .info-name {
          font-size: 1.333rem;
          font-weight: 500;
          color: #252933;
        }
      }
    }

    .userinfo-body {
      .body-box {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;

        div {
          width: 25px;
          height: 25px;
          background-color: rgba(30, 128, 255, 0.3);
          border-radius: 50%;
          margin-right: 1rem;
          display: flex;
          i {
            margin: auto;
            color: var(--taojin-brand-3-click);
            font-size: 1.5rem;
            z-index: 1;
          }
        }
      }
    }
  }

  .article-sidebar-box {
    background-color: var(--taojin-backgroung-color);
    min-height: 10vh;
    margin-bottom: 20px;
    transition: top 0.3s;
    border-radius: 2px;

    .box-title {
      font-weight: 500;
      padding: 1.333rem 0;
      margin: 0 1.667rem;
      font-size: 16px;
      line-height: 2rem;
      color: #1d2129;
      border-bottom: 1px solid #e4e6eb;
    }

    .box-body {
      max-height: 600px;
      margin: 8px 4px 8px 0;
      overflow: auto;
      position: relative;
    }

    .box-body::-webkit-scrollbar {
      width: 4px;
    }

    .box-body::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgb(220, 220, 220);
      box-shadow: inset 0 0 5px rgb(220, 220, 220);
      background: rgb(220, 220, 220);
    }

    .similar-item {
      padding: 0.667rem 1.667rem;
      cursor: pointer;

      .item-title {
        line-height: 22px;
        font-size: 1.167rem;
        font-weight: 400;
        color: #252933;
      }

      .digg_count {
        margin-right: 1rem;
      }

      .item-meta {
        font-size: 1.167rem;
        line-height: 22px;
        color: #8a919f;
      }
    }

    .similar-item:hover > .item-title {
      color: var(--taojin-brand-2-hover);
    }

    .directory-item {
      position: relative;
      font-size: 1.167rem;
      font-weight: 400;
      line-height: 22px;
      margin-left: 4px;
      cursor: pointer;

      span {
        display: block;
        padding: 8px 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
      }

      span:hover {
        background-color: rgba(30, 128, 255, 0.05);
        border-radius: 2px;
      }
    }
  }
}

.d2 {
  padding-left: 1rem;
}

.d3 {
  padding-left: 2rem;
}

.d4 {
  padding-left: 3rem;
}

.actived::before {
  content: ' ';
  position: absolute;
  width: 4px;
  height: 16px;
  background-color: var(--taojin-brand-1-normal);
  left: 0px;
  border-radius: 0 5px 5px 0;
  opacity: 0.5;
  margin-top: 12px;
}

.actived {
  color: var(--taojin-brand-3-click);
}

.fixed {
  position: fixed;
  top: 2rem;
  width: 25rem;
}

.down {
  top: 8rem;
}
</style>
